import { useState } from "react"

const getUserList = () => {
  return [
    { id: 1, name: '张三', account: 'zhangsan' },
    { id: 2, name: '李四', account: 'lisi' },
  ]
}

const HooksPage = () => {
  const [count, setCount] = useState(0)
  const [userList, setUserList] = useState(getUserList)

  const increment = () => {
    // setCount(count + 1)
    setCount((preCount) => {
      return preCount + 1
    })
  }
  const addUserList = () => {
    setUserList([
      ...userList,
      {
        id: userList.length + 1,
        name: '吴鹏' + userList.length + 1,
        account: 'wupeng'
      }
    ])
  }
  return (
    <div>
      <div>
        <h1>useState</h1>
        <button onClick={increment}>点击{count}++</button>
        <button onClick={addUserList}>增加列表</button>
        <ul>
          {userList.map(item => <li key={item.id}>{item.id}--{item.name}--{item.account}</li>)}
        </ul>
      </div>
    </div>
  )
}

export default HooksPage